<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选案例</title>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="10px" style="border-collapse: collapse;" id="tableId">
       <tr>
           <td></td>
           <td>姓名</td>
           <td>性别</td>
           <td>年龄</td>
           <td>家庭住址</td>
       </tr>
       <tr>
           <td width="20px"><input type="checkbox" name="man" id="" value="1" ></td>
           <td>张三</td>
           <td>男</td>
           <td>21</td>
           <td>福建省新罗区</td>
       </tr>
       <tr>
           <td><input type="checkbox" name="man" id="" value="2"></td>
           <td>李四</td>
           <td>男</td>
           <td>22</td>
           <td>福建省新罗区</td>
       </tr>
       <tr>
           <td><input type="checkbox" name="man" id="" value="3"></td>
           <td>王五</td>
           <td>男</td>
           <td>23</td>
           <td>福建省新罗区</td>
       </tr>
       <tr>
           <td><input type="checkbox" name="woman" id="" value="4"></td>
           <td>赵云</td>
           <td>女</td>
           <td>24</td>
           <td>福建省新罗区</td>
       </tr>
       <tr>
           <td><input type="checkbox" name="woman" id="" value="5"></td>
           <td>钱电</td>
           <td>女</td>
           <td>25</td>
           <td>福建省新罗区</td>
       </tr>
       <tr>
           <td><input type="checkbox" name="woman" id="" value="6"></td>
           <td>孙峰</td>
           <td>女</td>
           <td>26</td>
           <td>福建省新罗区</td>
       </tr>
    </table>
    <td><input type="checkbox" name="" id="checkAllID" value="" onclick="checkAll()" >全选</td>
    <td><input type="checkbox" name="" id="checkManID" value="" onclick="checkMan()">男</td>
    <td><input type="checkbox" name="" id="checkWoManID" value="" onclick="checkWoMan()">女</td>
    <button type="submit" >删除</button>
</body>
<script type="text/javascript">
    function checkAll(){
        //通过id获取到整个的table的元素
        var tableObj =document.getElementById('tableId')
        var allSelInput =tableObj.getElementsByTagName('input')
        var checkAllIDValue =document.getElementById('checkAllID')
        for(var i=0;i<allSelInput.length;i++){
            allSelInput[i].checked=checkAllIDValue.checked
        }
    }

    function checkMan(){
        var tableObj =document.getElementById('tableId')
        var inputManId=tableObj.getElementsByTagName('input')
        var checkManIDValue =document.getElementById('checkManID')
        for(var i=0;i<inputManId.length;i++){
             if (inputManId[i].name =='man') {
                inputManId[i].checked=checkManIDValue.checked
             }
        }
    }
    function checkWoMan(){
            var tableObj =document.getElementById('tableId')
        var inputWomanId =tableObj.getElementsByTagName('input')
        var checkWoManIDValue =document.getElementById('checkWoManID')
        for(i=0;i<inputWomanId.length;i++){
            if (inputWomanId[i].name =='woman') {
                inputWomanId[i].checked=checkWoManIDValue.checked
            }
        }
        }
</script>
</html>